import React, { useEffect, useState } from 'react';
import { Button, Input, Table, Space, Modal, Form } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import store from '../../../store/index'
// import axios from 'axios';
interface Props {
    stocklistdata: []
    stockdelete: Function
    stockupdate: Function
}
interface DataType {
    id: string;
    key: string;
    stockid: string,
    stocktitle: string;
    stockaddress: string;
    servicecall: string;
    business: string;
    stocktype: string;
    stockdetailedaddress: string;
    stockstate: string;
}

function StockListTable(props: Props) {
    const [form] = Form.useForm();
    //delete
    const stockdelete = (value: Object) => {
        props.stockdelete(value)
    }
    //update
    var [isModalOpen_2, setIsModalOpen_2] = useState(false)
    const showModal = (text: any) => {
        setIsModalOpen_2(true);
        text = JSON.parse(JSON.stringify(text))
        console.log(text);
        form.setFieldsValue(text)
    };
    const handleCancel_2 = () => {
        setIsModalOpen_2(false);
    };
    var onFinish_2 = (values: any) => {
        console.log('edit');
        props.stockupdate(values)
        setIsModalOpen_2(false);
    };
    const columns: ColumnsType<DataType> = [
        {
            title: '仓库ID',
            dataIndex: 'stockid',
            // key: 'danhao',
        },
        {
            title: '仓库名称',
            dataIndex: 'stocktitle',
            // key: 'renyuan',
        },
        {
            title: '所属区县',
            dataIndex: 'stockaddress',
            // key: 'cangku',
        },
        {
            title: '服务电话',
            dataIndex: 'servicecall',
            // key: 'cangku',
        },
        {
            title: '所属商家',
            dataIndex: 'stocktitle',
            // key: 'time',
        },
        {
            title: '仓库类型',
            dataIndex: 'stocktype',
            // key: 'shenheren',
        },
        {
            title: '详情地址',
            dataIndex: 'stockdetailedaddress',
            // key: 'shenhetime',
        },
        {
            title: '状态',
            dataIndex: 'stockstate',
            // key: 'zhuangtai',
        },
        {
            title: '操作',
            key: '10',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { stockdelete(record) }} >删除</a>
                    <a onClick={() => { showModal(record) }}>编辑</a>
                </Space>
            ),
        },
    ];
    return (
        <div>
            <Table
                columns={columns}
                dataSource={props.stocklistdata}
                className="table" />
            {/* 编辑弹窗 */}
            <Modal forceRender={true} title="编辑item" footer={null} open={isModalOpen_2} onCancel={handleCancel_2}>
                <Form onFinish={onFinish_2} form={form}>
                    <Form.Item
                        name="id"
                        hidden
                        rules={[
                            {

                                required: true,
                                message: '请输入id!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入id" />
                    </Form.Item>
                    <Form.Item
                        name="key"
                        hidden
                        rules={[
                            {

                                required: true,
                                message: '请输入key!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入key" />
                    </Form.Item>
                    <Form.Item
                        name="stockid"
                        rules={[
                            {

                                required: true,
                                message: '请输入仓库ID!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库ID" />
                    </Form.Item>

                    <Form.Item
                        name="stocktitle"
                        rules={[
                            {
                                required: true,
                                message: '请输入仓库名称!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库名称" />
                    </Form.Item>

                    <Form.Item
                        name="stockaddress"
                        rules={[
                            {
                                required: true,
                                message: '请输入所属区县!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入所属区县" />
                    </Form.Item>

                    <Form.Item
                        name="servicecall"
                        rules={[
                            {
                                required: true,
                                message: '请输入服务电话!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入服务电话" />
                    </Form.Item>
                    <Form.Item
                        name="stocktype"
                        rules={[
                            {
                                required: true,
                                message: '请输入仓库类型!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库类型" />
                    </Form.Item>
                    <Form.Item
                        name="stockdetailedaddress"
                        rules={[
                            {
                                required: true,
                                message: '请输入详情地址!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入详情地址" />
                    </Form.Item>
                    <Form.Item
                        name="stockstate"
                        rules={[
                            {
                                required: true,
                                message: '更新状态!',
                            },
                        ]}
                    >
                        <Input placeholder="更新状态" />
                    </Form.Item>
                    <Form.Item>
                        <Button block type="primary" htmlType="submit" shape="round">
                            确认更新
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>


    );
}

export default StockListTable;